<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-search"
          size="mini"
          @click="handleSearch"
        >搜索
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
        >导出
        </el-button>
      </el-col>
      <!-- 分页效果 -->
      <el-col :span="2.2" style="position: absolute;right: 0px;top:0">
        <Page style="margin-right: 0px "
              :current="queryParams.pageNum"
              :page-size="queryParams.pageSize"
              :total="total"
              @on-change="pageChange"
              simple
        ></Page>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 查询对话框   -->
    <el-dialog :title="title"
               v-model="openSearch"
               :close-on-click-modal="false"
               draggable width="400px"
               append-to-body
    >
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
        <el-col :span="24">
          <el-form-item label="建立日期">
            <el-date-picker
              v-model="queryParams.startDate"
              style="width: 130px"
              size="small"
              value-format="yyyy-MM-dd"
              placeholder="开始时间"
              type="date"
              :picker-options="pickerOptions"
            ></el-date-picker>
            -
            <el-date-picker
              v-model="queryParams.endDate"
              size="small"
              style="width: 130px"
              value-format="yyyy-MM-dd"
              placeholder="结束时间"
              type="date"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="机台编号" prop="machineCode">
            <el-input
              v-model="queryParams.machineCode"
              placeholder="请输入机台编号"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="客户编码" prop="customerCode">
            <el-input
              v-model="queryParams.customerCode"
              placeholder="请输入客户编码"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col style="text-align: center" :span="24">
          <el-radio-group v-model="queryParams.shiftCode">
            <el-radio label="BB">白班</el-radio>
            <el-radio label="YB">晚班</el-radio>
            <el-radio label="">白班晚班</el-radio>
          </el-radio-group>
        </el-col>
        <el-col :span="24">
          <el-form-item style="margin-top: 25px; display: flex;justify-content: flex-end">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="handleQuery">确认</el-button>
          </el-form-item>
        </el-col>

      </el-form>
    </el-dialog>

    <el-table
      highlight-current-row
      border
      stripe
      v-loading="loading"
      id="qualitySpotCheck"
      :data="qualitySpotCheckList"
      height="calc(100% - 170px)"
      :header-cell-style="{'text-align':'center'}"
    >
      <el-table-column label="#" fixed="left" type="index" width="40" align="center"/>
      <el-table-column label="抽检日期" :show-overflow-tooltip="true" width="80" align="center" prop="qscProductionDate"/>
      <el-table-column label="班次" :show-overflow-tooltip="true" width="80" align="center" prop="qscShift">
        <template v-slot="scope">
          <span v-if="scope.row.qscShift==='BB'">白班</span>
          <span v-if="scope.row.qscShift==='YB'">晚班</span>
        </template>
      </el-table-column>
      <el-table-column label="机台编号" :show-overflow-tooltip="true" width="80" align="center" prop="qscMachineCode"/>
      <el-table-column label="客户编码" :show-overflow-tooltip="true" align="center" prop="qscCustomerCode"/>
      <el-table-column label="7点-9点" :show-overflow-tooltip="true" width="130" align="center" prop="qscOne"/>
      <el-table-column label="9点-11点" :show-overflow-tooltip="true" width="130" align="center" prop="qscTwo"/>
      <el-table-column label="11点-1点" :show-overflow-tooltip="true" width="130" align="center" prop="qscThree"/>
      <el-table-column label="1点-3点" :show-overflow-tooltip="true" width="130" align="center" prop="qscFour"/>
      <el-table-column label="3点-5点" :show-overflow-tooltip="true" width="130" align="center" prop="qscFive"/>
      <el-table-column label="5点-7点" :show-overflow-tooltip="true" width="130" align="center" prop="qscSix"/>
      <el-table-column label="创建人员" :show-overflow-tooltip="true" width="80" align="center" prop="qscCreateBy"/>
      <el-table-column label="创建日期" :show-overflow-tooltip="true" width="130" align="center" prop="qscCreateTime"/>
      <el-table-column label="更新人员" :show-overflow-tooltip="true" width="80" align="center" prop="qscUpdateBy"/>
      <el-table-column label="更新日期" :show-overflow-tooltip="true" width="130" align="center" prop="qscUpdateTime"/>
    </el-table>
  </div>
</template>

<script>
import {exportQualitySpotCheck, listQualitySpotCheck} from "@/api/quality/qualitySpotCheck"

export default {
  name: "QualitySpotCheck",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: document.body.clientHeight > 900 ? 25 : 17,
        machineCode: null,
        customerCode: null,
        shiftCode: '',
        startDate: new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 30 * 3),
        endDate: new Date()
      },
      // 弹出层标题
      title: '',
      // 显示搜索条件
      showSearch: true,
      // 是否显示弹出层
      openSearch: false,
      // 总条数
      total: 0,
      // 品质抽检存放
      qualitySpotCheckList: [],
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      if (null != this.queryParams.startDate && null != this.queryParams.endDate) {
        this.queryParams.startDate = this.$moment(this.queryParams.startDate).format('YYYY-MM-DD')
        this.queryParams.endDate = this.$moment(this.queryParams.endDate).format('YYYY-MM-DD')
      }
      listQualitySpotCheck(this.queryParams)
        .then(res => {
          this.qualitySpotCheckList = res.rows
          this.total = res.total
          this.loading = false
        })
        .catch(error => {
          console.log(error)
          this.loading = false
        })
    },
    reset() {
      this.queryParams.machineCode = null;
      this.queryParams.customerCode = null;
      this.queryParams.shiftCode = '';
      this.queryParams.startDate = new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 30 * 3);
      this.queryParams.endDate = new Date();
    },
    cancel() {
      this.openSearch = false
      this.reset()
    },
    handleSearch() {
      this.title = '查询品质抽检报表'
      this.openSearch = true
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
      this.openSearch = false
    },
    /** 导出数据 */
    handleExport() {
      const queryParams = this.queryParams
      this.$confirm('确认要导出所有品质抽检数据吗？', '确认', {
        cancelButtonText: '取消',
        confirmButtonText: '确认',
      })
        .then(() => {
          this.exportLoading = true
          return exportQualitySpotCheck(queryParams)
        })
        .then(res => {
          this.download(res.msg)
          this.exportLoading = false
        })
        .catch(error => {
          console.log(error)
          this.exportLoading = false
        })
    },
    /** 分页 */
    pageChange(page) {
      this.queryParams.pageNum = page
      this.getList()
    },
  },
}
</script>

<style lang="scss" scoped>

</style>
